<style lang='less' scoped>
.buy-shop{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	.buy-shop__info{
		height: 475px;
		background: #fff;
		.buy-shop__top{
			flex: 1;
			height: 100%;
		}
		.buy-shop__bottom{
			height: 50px;
			line-height: 50px;
			>div{
				line-height: 50px;
				flex: 1;
				&:first-child{
					background: #383B44;
				}
			}
		}
		.buy-shop__info{
			padding: 0 15px 25px;
			border-bottom: 1px solid #E5E5E5;
			height: 100px;
			.shop-info__pic{
				width: 112px;
				height: 112px;
				overflow: hidden;
				border-radius: 3px;
				padding: 3px;
				background: #fff;
				margin-top: -32px;
				
				.shop-info__img{
					width: 100%;
				}
			}
		}
		.buy-shop__subs{
			border-bottom: 1px solid #E5E5E5;
			padding: 10px;
			.shop-subs__item{
				width: 42px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #F5F5F5;
				border-radius: 2px;
				&.active{
					background: #7A1634;
					color: #fff;
				}
			}
		}
	}
}
</style>

<template>
    <div class="buy-shop flex-column-end">
		<div class="buy-shop__info flex-column-start">
			<div class="buy-shop__top">
				<div class="buy-shop__info flex-row-start">
					<div class="shop-info__pic MR-10">
						<img src="https://img.alicdn.com/imgextra/i1/2906726927/TB2RowQaLNNTKJjSspfXXbXIFXa_!!2906726927-0-daren.jpg_180x180xzq90.jpg_.webp" class="shop-info__img" mode="widthFix">
					</div>
					<div class="MT-20">
						<p class="text-red text-18">￥999</p>
						<p>库存20件</p>
						<p>已选："S" "白"</p>
					</div>
				</div>
				<div class="buy-shop__subs">
					<div class="shop-subs__title text-12 MB-10">尺寸</div>
					<div class="shop-subs__content flex-row-start">
						<div 
						class="shop-subs__item MR-15 text-14" 
						:class="{'active': sizes.index === index}" 
						v-for="(item, index) in sizes.list" 
						:key="index"
						@click="toggleSize(index)">
							{{item.name}}
						</div>
					</div>
				</div>
				<div class="buy-shop__subs">
					<div class="shop-subs__title text-12 MB-10">颜色</div>
					<div class="shop-subs__content flex-row-start">
						<div 
						class="shop-subs__item MR-15 text-14" 
						:class="{'active': colors.index === index}" 
						v-for="(item, index) in colors.list" 
						:key="index"
						@click="toggleColor(index)">
							{{item.name}}
						</div>
					</div>
				</div>
				<div class="buy-shop__num flex-row-between PL-10 PR-10 PT-20">
					<span class="text-12">数量</span>
					<counter></counter>
				</div>
			</div>
			<div class="buy-shop__bottom flex-row-start">
				<div class="text-white text-center text-14" @click="addShopCar">加入购物车</div>
				<div class="btn-main text-white text-center text-14" @click="buy">立即购买</div>
			</div>
		</div>
	</div>
</template>

<script>
import counter from '../counter/index.vue'
export default {
	props: {
		// 商品尺寸
		sizes: {
			type: Array,
			default() {
				return {
					list: [{
						name: 'S'
					}, {
						name: 'M'
					}, {
						name: 'L'
					}],
					index: 0
				}
			}
		},
		colors: {
			type: Array,
			default() {
				return {
					list: [{
						name: '白'
					}, {
						name: '黑'
					}],
					index: 0
				}
			}
		}
	},
	components: {
		counter
	},
	methods: {
		/**
		 * 切换尺寸
		 */
		toggleSize(index) {
			this.sizes.index = index
		},
		/**
		 * 切换颜色
		 */
		toggleColor(index) {
			this.colors.index = index
		},
		/**
		 * 添加商品进入购物车
		 */
		addShopCar() {
			this.$emit('shopcar')
		},
		/**
		 * 立即购买
		 */
		buy() {
			this.$emit('buy')
		},
	}
}
</script>